import { Progress } from 'antd';
import React from 'react';
const per = (num: number, p: number = 2) => {
  return Number((num * 100).toFixed(p));
};
const pStyle: React.CSSProperties = {
  margin: '8px 0',
  fontSize: '16px',
};
const OrderRates = (props: { total: number; printed: number; omissive: number; free: number }) => {
  const { total, printed, omissive, free } = props;
  const freeRate = per(free / total);
  const printedRate = per(printed / total);
  const omissiveRate = per(omissive / total);
  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        display: 'flex',
        justifyContent: 'space-around',
        alignItems: 'center',
      }}
    >
      <div>
        <Progress type="circle" percent={freeRate} strokeWidth={15} strokeColor="#33bc2c" />
        <p style={pStyle}>免费订单</p>
      </div>
      <div>
        <Progress type="circle" percent={printedRate} strokeWidth={15} />
        <p style={pStyle}>打印订单</p>
      </div>
      <div>
        <Progress type="circle" percent={omissiveRate} strokeWidth={15} strokeColor="#ff444a" />
        <p style={pStyle}>漏收订单</p>
      </div>
    </div>
  );
};

export default OrderRates;
